<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../js/lib/theme-chalk/index.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/my_commont.css" />
		<link rel="stylesheet" type="text/css" href="index.css" />
		<script src="../../common/utilCookie.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/author.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/axios.min.js"></script>
		<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入组件库 -->
		<script src="../../js/lib/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../common/judegetEmpty.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/aixos-init.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="auditHistoryApp" v-cloak>
			<div class="contaner" v-loading.fullscreen.lock="fullscreenLoading">
				<div class="section-header">
					订单 - -客服操作记录
				</div>
				<hr class="hr-style" />
				<div class="deliver-content">
					
					<div style="margin-top: 20px;">
						
					<el-table
					    ref="multipleTable"
					    :data="tableData"
						border
					    tooltip-effect="dark"
					    style="width: 100%"
					   >
					   <el-table-column
					     prop="shopOrderNo"
					     label="订单号"
					     width="120">
					   </el-table-column>
						<el-table-column width="150" label="商品信息">
							<template slot-scope="scope">
								<div class="good-table-info">
									<el-image style="width: 60px; height: 60px" :src="scope.row.commodityCover" fit="fill"></el-image>
									<p class="good-table-info-text">商品名称:{{scope.row.commodityName}}</p>
									<p class="good-table-info-text">价格:{{scope.row.price}}</p>
									<p class="good-table-info-text">规格:{{scope.row.standardInfo}}</p>
								</div>
						
							</template>
						</el-table-column>
						<el-table-column
						  prop="amount"
						  label="退款数量"
						  width="120">
						</el-table-column>
						<el-table-column
						  label="退款时间"
						  width="120">
						  <template slot-scope="scope">{{ scope.row.refundTime }}</template>
						</el-table-column>
						<el-table-column width="150" label="退款人信息">
							<template slot-scope="scope">
								<div class="good-table-info">									
									<p class="good-table-info-text">昵称:{{scope.row.username}}</p>
									<p class="good-table-info-text">电话:{{scope.row.userPhone}}</p>
									<p class="good-table-info-text">退款原因:{{scope.row.refundNode}}</p>
								</div>
							</template>
						</el-table-column>
						<el-table-column width="150" label="商家信息">
							<template slot-scope="scope">
								<div class="good-table-info">									
									<el-image style="width: 60px; height: 60px" :src="scope.row.shopLogo" fit="fill"></el-image>
									<p class="good-table-info-text">店铺名称:{{scope.row.shopName}}</p>
									<p class="good-table-info-text">拒绝原因:{{scope.row.refundCause}}</p>
								</div>
							</template>
						</el-table-column>
			              <el-table-column label="操作" width="250">
			              	<template slot-scope="scope">
			              		<el-button size="mini"  @click="handleHistory(scope.row)">查看协商历史</el-button>
			              	</template>
			              </el-table-column>
					  </el-table>
					  
					</div> 
				</div>
			     <el-dialog title="协商历史" :visible.sync="dialogFormVisible">
			        <div v-for="item in refoundHistory">
			        	<div class="refound_info">
			        		<el-image style="width: 50px; height: 50px" :src="item.userPhoto" fit="fit"></el-image>
			        		<div class="item-content">
			        			<p>{{item.username}} {{item.refundTime}}</p>
			        			<p>{{item.refundReason}} {{item.refundNode}}</p>
			        		</div>
			        	</div>
			        	<hr />
			        </div>       
			        <div slot="footer" class="dialog-footer">
			          <el-button @click="dialogFormVisible = false">知道了</el-button>
			          
			        </div>
			     </el-dialog>  
			</div>
		</div>
	</body>
</html>
